<template>
    <div class="memu-content">
        <div class="memu-item" v-for="(item,index) in memuList" :key="index" 
        @mouseenter="mouseenter(index)" 
        @mouseleave="mouseleave"
        @click="logout(index)"
        >
            <span>{{item.name}}</span>
            <div class="memu-item-nav" v-show="showMemu == index && index != 5">
                <p v-for="(lis,navs) in item.list" :key="navs" @click="$router.push(lis.url)">
                    {{lis.name}}
                </p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            memuList: [{
                name: '用户管理',
                list: [{
                    name: '用户列表',
                    url: '/admin/manageUser'
                },{
                    name: '添加用户',
                    url: '/admin/addUser'
                }]
            },{
                name: '商店管理',
                list: [{
                    name: '商店列表',
                    url: '/admin/manageStore'
                },{
                    name: '添加商店',
                    url: '/admin/addStore'
                }]
            },{
                name: '工厂管理',
                list: [{
                    name: '工厂列表',
                    url: '/admin/manageFactory'
                },{
                    name: '建立工厂',
                    url: '/admin/addFactory'
                }]
            },{
                name: '厂库管理',
                list: [{
                    name: '厂库列表',
                    url: '/admin/manageWarehouse'
                },{
                    name: '添加厂库',
                    url: '/admin/addWarehouse'
                }]
            },{
                name: '售后管理',
                list: [{
                    name: '售后列表',
                    url: '/admin/manageCustomerService'
                },{
                    name: '添加售后',
                    url: '/admin/addCustomerService'
                }]
            },{
                name: '退出',
            }],
            showMemu: null
        }
    },
    methods: {
        mouseenter(index) {
            this.showMemu = index
        },
        mouseleave() {
            this.showMemu = null
        },
        logout(index) {
            // if (idnex === 5) this.$router.push('/')
        }
    }
}
</script>

<style lang="scss" scoped>
    .memu-content {
        width: 800px;
        height: 40px;
        line-height: 40px;
        display: flex;
        margin: 0 auto;
        background: forestgreen;
        border: 1px solid #ccc;
        .memu-item {
            width: 133px;
            text-align: center;
            color: #fff;
            cursor: pointer;
            border-right: 1px solid #ccc;
            .memu-item-nav {
                width: 100%;
                padding: 10px 0 20px 0;
                background: #999;
                border-radius: 5px;
                position: relative;
                z-index: 999;
            }
        }
    }
    
</style>